<template>
  <h2>进制转换</h2>
  <el-row class="radius">
    <el-col :span="11" :offset="1"> 数字格式化 </el-col>
    <el-col :span="11">
      <el-switch v-model="isFormatNumber" class="ml-2 switch-container" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
    </el-col>
    <el-col :span="1"></el-col>
  </el-row>

  <el-row>
    <el-form>
      <el-form-item label="二进制">
        <el-input v-model="binary" />
        <el-button type="primary" :icon="Check" circle />
      </el-form-item>
      <el-form-item label="八进制">
        <el-input v-model="otc" />
      </el-form-item>
      <el-form-item label="十进制">
        <el-input v-model="ten" />
      </el-form-item>
    </el-form>
  </el-row>
</template>

<script setup>
import { ref } from 'vue';
import { Check } from '@element-plus/icons-vue';
const isFormatNumber = ref(false);
</script>
<style scoped>
.radius {
  height: 70px;
  border-radius: 10px;
  width: 100%;
  border: 1px solid var(--el-border-color);
  padding: 20px;
  /* background-color: var(--prism-background); */
}
.switch-container {
  display: flex;
  justify-content: flex-end;
}
</style>
